<template>
  <view class="content-view">
    <view class="content-top-view">
      <view class="content-top-item" @click="itemClick(1)">
        <view class="content-top-title">周报</view>
      </view>

      <view class="content-top-item" @click="itemClick(2)">
        <view class="content-top-title">周报</view>
      </view>

      <view class="content-top-item" @click="itemClick(3)">
        <view class="content-top-title">周报</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    itemClick: function(e) {
      // console.log(e);
    }
  }
};
</script>

<style lang="scss">
.content-view {
  background: #fafbfb;
  flex: 1;
  display: flex;
  flex-direction: column;

  .content-top-view {
    margin: 20px 24px 0px 24px;
    height: 109px;
    display: flex;
    flex-direction: row;
    background: $white;
    .content-top-item {
      &.first {
        background: red;
      }
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .content-top-img {
        width: 35px;
        height: 35px;
      }
      .content-top-title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(54, 54, 54, 1);
      }
    }
  }
}
</style>
